<template>
    <layout>
        <mt-header title="社区详情">

            <a href="javascript:window.history.go(-1);" slot="left">

                <mt-button icon="back"></mt-button>

            </a>


        </mt-header>

        <div class="title">{{ post.title }}</div>

        <!--人物信息-->
        <div class="name_box">
            <div class="tx_img"><img :src="showImage(post.headImgUrl, '?x-oss-process=image/resize,h_100')"/></div>
            <div class="tx_name">
                <div class="name">{{ post.name }}</div>
                <div class="time">{{ post.createDate }}</div>
            </div>
        </div>
        <!--人物发布内容-->
        <div class="con_title">
            <template v-if="post.content != '' && post.content != undefined"><p v-html="post.content"></p></template>
            <template v-else>
                <template v-for="item in post.jsoups">
                    <div class="con_top">
                        {{item.content}}
                    </div>
                    <template v-if="item.image != '' && item.image != undefined"><img width="100%" :src="showImage(item.image)"/></template>
                </template>
            </template>
        </div>
        <div class="con_footer">
            <div class="con_l">
                <div><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/header_portrait2.png"></div>
                <div><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/header_portrait2.png"></div>
                <div><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/header_portrait2.png"></div>
                <div><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/header_portrait2.png"></div>
                <div><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/header_portrait2.png"></div>
            </div>
            <div class="con_r">
                <span class="browse">{{ post.clickRate }}浏览</span>
                <span class="fabulous">{{ post.postLikeCount }}赞</span>
            </div>
        </div>

        <!--最新评论列表-->
        <div class="new_box" id="commentContainer">
            <div class="new_title">最新评论({{ totalCount }})</div>
            <!--人物信息-->


            <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                <ul class="ui_list page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                    <li class="item" v-for="item in list">

                           <div class="name_box">
                               <!--<div class="tx_img"><img :src="showImage(item.headImgUrl, '?x-oss-process=image/resize,h_100')"/></div>-->
                               <div class="tx_img"><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/header_portrait2.png"></div>
                               <div class="tx_name">
                                   <div>{{ item.name }}</div>
                                   <div>{{ item.createDate }}</div>
                               </div>
                               <div class="tx_right  icon-yizan" v-if="item.postLikeCount >0 " @click="dian(item)">{{ item.postLikeCount }}</div>
                               <div class="tx_right  icon-dianzan" v-else="" @click="dian(item)">{{ item.postLikeCount }}</div>


                           </div>
                           <div  class="new_con">{{ item.content }}</div>
                           <a :href="'/forum/comment/' + item.id" class="new_hf">查看{{ item.topicCount }}条回复</a>

                    </li>
                </ul>
                <p v-show="loading" class="page-infinite-loading">
                    <mt-spinner :size="20" type="fading-circle"></mt-spinner>
                    <span>加载中...</span>
                </p>
            </div>
        </div>


        <div class="xians"></div>
        <div class="footer" v-show="!commentStatus">

            <div  v-if="post.likeId" class="likes icon-yizan" @click="like" >点赞</div>
            <div v-show="isNone" v-else="post.likeId" class="likes icon-dianzan" @click="like" >点赞</div>
            <div v-show="isShow" v-if="!post.likeId" class="likes icon-yizan" >点赞</div>

            <div class="reply icon-pinglun" @click="commentStatus = true">回复</div>

            <div v-if="post.collectionId" class="collection icon-yishoucang" @click="collect">收藏</div>
            <div v-show="istrue" v-else="post.collectionId" class="collection icon-shoucang"  @click="collect">收藏</div>
            <div v-show="isChow" v-if="!post.collectionId" class="collection icon-yishoucang"  >收藏</div>




        </div>
        <div class="footer" v-show="commentStatus">
            <span>
                <input type="text" v-model="content" placeholder="开始你的评价">
                <span class="sumint" @click="comment" v-if="content != ''">发送</span>
                <span class="sumint cancle" @click="commentStatus = false" v-else>取消</span>
            </span>
        </div>
    </layout>
</template>
<style lang="scss">
    @import "index";
</style>
<script type="text/babel">
    import { api, image } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                content: '',
                commentStatus: false,
                selected: '1',
                list: [],
                lastPage: false,
                pageNo: 0,
                nextPage: 1,
                totalCount: 0,
                sort: 0,
                type: '',
                loading: false,
                wrapperHeight: 0,
                hasError: false,

                isShow:false,
                isNone:true,
                isChow:false,
                istrue:true,





            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {
            showImage(url, params){
                return image(this.api.image, url, params);
            },
            reload(callback){
                this.list = [];
                this.nextPage = 1;
                this.pageNo = 1;
                this.lastPage = false;
                this.loadMore(callback);
            },

            dian(item){
                let param = new URLSearchParams();
                param.append("type", 2);
                param.append("id", item.id);
                this.$http.post('/api/like/add',
                    param
                ).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            Mint.Toast('点赞成功');
                            this.reload(function () {
                                var height = document.querySelector('#commentContainer').offsetTop + window.screen.height;
                            });
                        }else{
                            Mint.Toast(data.message);
                        }
                    }else{
                    }
                })
            },


            loadMore(callback){
                if (this.lastPage){
                    return;
                }

                this.loading = true;
                this.$http.get('/api/comment/post/list', {
                    params: {
                        id: this.post.id,
                        pageNo: this.nextPage
                    }
                }).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            data = data.data;
                            this.lastPage = data.lastPage;
                            this.pageNo = data.pageNo;
                            this.nextPage = data.nextPage;
                            this.totalCount = data.totalCount;

                            let list = data.list;
                            for (let i = 0; i < list.length; i++){
                                this.list.push(list[i]);
                            }

                            //调用回调
                            if (callback){
                                callback();
                            }
                        }
                    }else{
                        this.lastPage = true;
                    }
                    this.loading = false;
                })
            },




            like(){
                let param = new URLSearchParams();
                param.append("type", 1);
                param.append("domainId", this.post.id);
                this.$http.post('/api/like/add',
                    param
                ).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {

                        this.isShow=true
                        this.isNone=false

                        }else{
                            Mint.Toast(data.message);
                        }
                    }else{
                    }
                })
            },
            collect(){
                let param = new URLSearchParams();
                param.append("type", 2);
                param.append("id", this.post.id);
                this.$http.post('/api/collect/add',
                    param
                ).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            Mint.Toast('收藏成功');

                           this.isChow = true



                        } else {
                            Mint.Toast(data.message);
                        }
                    }else{
                    }
                })
            },
            comment(){
                let param = new URLSearchParams();
                param.append("type", 1);
                param.append("id", this.post.id);
                param.append("content", this.content);

                this.$http.post('/api/comment/post/add',
                    param
                ).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            Mint.Toast('评论成功');
                            this.commentStatus = false;
                            this.content = '';

                            this.reload(function () {
                                var height = document.querySelector('#commentContainer').offsetTop + window.screen.height;
                                window.scrollTo({"behavior": "smooth", "top": height });
                            });
                        }
                    }else{
                    }
                })
            }
        },
        created(){
        },
        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
    }
</script>

